<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer CMS - 后台管理系统</title> 
    <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">栏目管理</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">栏目管理</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
	<div class="panel-body">
        <button class="btn btn-primary btn-addon btn-sm" onclick="toAddCategory();" shiro:hasAnyPermissions="system:category:toadd,system:category:add">
            <i class="fa fa-plus"></i> 添加顶级栏目
        </button>
        <button class="btn btn-primary btn-addon btn-sm" onclick="updateSort();" shiro:hasAnyPermissions="system:category:sort">更新排序</button>
    </div>
    <div class="panel-body table-responsive">
		<table class="table table-hover">
			<thead>
				<tr>
					<th style="width:50px;">选择</th>
					<th style="width:40px;">#</th>
					<th style="width:35px;">编码</th>
					<th>栏目名称</th>
					<th>英文名称</th>
					<th style="width:120px;">是否允许投稿</th>
					<th style="width:80px;">显示/隐藏</th>
					<th style="width:80px;">排序</th>
					<th style="width:300px;">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr th:id="${category.id}" th:attr="parent=${category.parentId}" th:each="category : ${page.list}">
					<td><input type="checkbox" class="flat-grey list-child" th:value="${category.id}" /></td>
					<td>
						<i class="fa fa-plus-square-o" th:if="${category.childrenFlag}==1" style="cursor:pointer;" th:typeid="${category.id}" th:attr="level=${category.level}" onclick="javascript:loadSons(this.getAttribute('typeid'),this)"></i>
					</td>
					<td th:text="${category.code}"></td>
					<td><a th:href="@{/admin/archives/list(entity[cid]=${category.code})}" th:text="${category.cnname}"></a></td>
					<td th:text="${category.enname}">Mark</td>
					<td><span th:text="${category.isInput}=='1'?'是':'否'" th:class="${category.isInput}=='1'?'label label-success':'label label-danger'">否</span></td>
					<td><span th:text="${category.isShow}=='1'?'是':'否'" th:class="${category.isShow}=='1'?'label label-success':'label label-danger'">否</span></td>
					<td>
						<input name="orderBy" type="text" th:attr="cid=${category.id}" class="form-control input-sm" th:value="${category.sort}" style="width:50px;height:20px;">
					</td>
					<td class="operate">
						<a th:href="@{/admin/category/toAdd(id=${category.id})}" class="btn btn-xs btn-success" shiro:hasAnyPermissions="system:category:toadd,system:category:add">添加下级栏目</a>
						<a th:href="@{/admin/category/toEdit(id=${category.id})}" class="btn btn-xs btn-success" shiro:hasAnyPermissions="system:category:toedit,system:category:update">编辑</a>
						<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" th:typeid="${category.id}" th:onclick="javascript:confrimRemove(this.getAttribute('typeid'))" shiro:hasAnyPermissions="system:category:delete">删除</a>
					</td>
				</tr>
				<tr th:if="${#lists.isEmpty(page.list)}">
					<td colspan="7" align="center">无数据</td>
				</tr>
			</tbody>
		</table>
    </div>
    <div class="panel-footer bg-white text-right">
         <ul class="pagination">
             <li><a th:href="@{/admin/category/list(pageNum=1,pageSize=${page.pageSize})}" title="首页" th:class="${page.isFirstPage} ? 'paginationNotAllowed' : ''">«</a></li>
             <li><a th:href="@{/admin/category/list(pageNum=${page.prePage},pageSize=${page.pageSize})}" title="上一页" th:if="${page.hasPreviousPage}">‹</a></li>
             <li th:each="pageinfo : ${page.navigatepageNums}"><a th:href="@{/admin/category/list(pageNum=${pageinfo},pageSize=${page.pageSize})}" th:class="${pageinfo == page.pageNum} ? 'paginationActive' : ''" th:text="${pageinfo}"></a></li>
             <li><a th:href="@{/admin/category/list(pageNum=${page.nextPage},pageSize=${page.pageSize})}" title="下一页" th:if="${page.hasNextPage}">›</a></li>
             <li><a th:href="@{/admin/category/list(pageNum=${page.pages},pageSize=${page.pageSize})}" title="未页" th:class="${page.isLastPage} ? 'paginationNotAllowed' : ''">»</a></li>
         </ul>
     </div>
</section>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="remove-dialog" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">操作提示？</h4>
            </div>
            <div class="modal-body">
            	<div class="alert alert-block alert-danger">
	                <strong>注意!</strong> 栏目删除会级联删除子栏目及文章且删除后不可恢复.
	            </div>
				<h4 class="modal-title">您确定要删除该记录吗？</h4>
				<input type="hidden" id="cacheID" />
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-primary btn-addon btn-sm" onclick="remove();">确定</button>
            	<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 2.0.2 -->
<script src="/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="/js/plugins/iCheck/icheck.min.js"></script>
<!-- Director App -->
<script src="/js/Director/app.js"></script>
<script src="/js/jquery.serializejson.js"></script>
<script>
	var hasAddPermission = false, hasEditPermission = false, hasDeletePermission = false;
</script>
<script shiro:hasAnyPermissions="system:category:toadd,system:category:add">
	var hasAddPermission = true;
</script>
<script shiro:hasAnyPermissions="system:category:toedit,system:category:update">
	var hasEditPermission = true;
</script>
<script shiro:hasAnyPermissions="system:category:delete">
	var hasDeletePermission = true;
</script>

<script>
	window.onload = function(){
		renderCheckBox();
	}
	
	function renderCheckBox(){
		$('input').on('ifChecked', function(event) {
		    $(this).parents('li').addClass("task-done");
		});
		$('input').on('ifUnchecked', function(event) {
		    $(this).parents('li').removeClass("task-done");
		});
		
		$('input[type="checkbox"].flat-grey, input[type="radio"].flat-grey').iCheck({
		    checkboxClass: 'icheckbox_flat-grey',
		    radioClass: 'iradio_flat-grey'
		});
	}
	
	function toAddCategory(){
		window.location.href = "/admin/category/toAdd?id=-1";	
	}
	function removeRows (parentId) {
        var parentDOM = $("tr[parent='" + parentId + "']");
        if (parentDOM && parentDOM.length > 0) {
            $(parentDOM).each(function () {
                var pid = $(this).attr('id');
                console.log(pid)
                if (pid != null && pid !== '') removeRows(pid);
            });
            $(parentDOM).remove();
        }
    }
	function loadSons(cid, obj){
		var parentDOM = $("tr[parent='" + cid + "']");
        $level = parseInt($(obj).attr("level"));
        
		if(parentDOM == null || parentDOM.length <= 0){
			$.ajax({
				url: "/admin/category/loadSon?id="+cid,
				type: "GET",
			    dataType:"json",
			    contentType:"application/json;charset=utf-8",
				success: function(data) {
					var trstr = "";
					for(var i = 0;i < data.list.length;i++){
						trstr += buildHTML(data.list[i]);
					}
					$("#" + cid).after(trstr);
					renderCheckBox();
				}
			});
		    $(obj).attr("class","fa fa-minus-square-o");
		}else{
			removeRows(cid);
			$(obj).attr("class","fa fa-plus-square-o");
		}
		renderCheckBox();
	}
	
	function buildHTML(element){
		var trstr = '<tr id="' + element.id + '" parent="' + element.parentId + '">';
	    trstr += '<td><input type="checkbox" class="flat-grey list-child"/></td>';
	    trstr += '<td>' + (element.childrenFlag == 1 ? '<i class="fa fa-plus-square-o" style="cursor:pointer;" onclick="loadSons(\''+ element.id +'\',this);" />':'') + '</td>';
	    trstr += '<td>' + element.code + '</td>';
	    trstr += '<td style="padding-left:' + ((element.level - 1)*40) + 'px;" level="' + element.level + '"><i class="fa fa-angle-right"></i> <a href="/admin/archives/list?entity%5Bcid%5D='+element.code+'">' + element.cnname + '</a></td>';
	    trstr += '<td>' + element.enname + '</td>';
		trstr += '<td>' + (element.isInput == 1 ? '<span class="label label-success">是</span>' : '<span class="label label-danger">否</span>') + '</td>';
	    trstr += '<td>' + (element.isShow == 1 ? '<span class="label label-success">是</span>' : '<span class="label label-danger">否</span>') + '</td>';
	    trstr += '<td>';
	    trstr += '<input name="orderBy" type="text" cid="' + element.id + '" class="form-control input-sm" value="'+element.sort+'" style="width:50px;height:20px;">';
	    trstr += '</td>';
	    trstr += '<td class="operate">';
	    if(hasAddPermission){
	    	trstr += '<a href="/admin/category/toAdd?id=' + element.id + '" class="btn btn-xs btn-success">添加下级栏目</a> ';
	    }
	    if(hasEditPermission){
	    	trstr += '<a href="/admin/category/toEdit?id=' + element.id + '" class="btn btn-xs btn-success">编辑</a> ';
	    }
	    if(hasDeletePermission){
	    	trstr += '<a href="javascript:void(0)" data-toggle="modal" class="btn btn-xs btn-danger" onclick="confrimRemove(\''+element.id+'\')">删除</a> ';
	    }
	    trstr += '</td>';
	    trstr += '</tr>';
	    return trstr;
	}
	
	function updateSort(){
		var arr = new Array();
		$("input[name='orderBy']").each(function(){
			var id = $(this).attr("cid");
			var sort = $(this).val();
			if(sort){
				arr.push({id:id,sort:sort});
			}
		});
		$.ajax({
			url: "/admin/category/updateSort",
			type: "POST",
			data: JSON.stringify(arr),
		    dataType: "json",
		    contentType:"application/json;charset=utf-8",
			success: function(data) {
				window.location.href = "/admin/category/list";
			},
			error: function(err){
				if(err.status == 403){
					window.location.href = "/exception/403"
				}
			}
		});
	}
	
	function confrimRemove(id){
		$("#remove-dialog").modal();
		$("#cacheID").val(id);
	}
	
	function remove(){
		var currentID = $("#cacheID").val();
		window.location.href="/admin/category/delete?id="+currentID;
		$("#remove-dialog").modal('hide');
	}
</script>	
</body>
</html>